<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <template #header>
      <el-form label-width="80px" :inline="true">
        <el-form-item label="医院名称:">
          <el-input placeholder="请输入" v-model="searchHos.hosname"></el-input>
        </el-form-item>
        <el-form-item label="医院编号:">
          <el-input placeholder="请输入" v-model="searchHos.hoscode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="ele-Search" @click="search"
            >搜索</el-button
          >
          <el-button type="primary" icon="ele-Plus" @click="showDialog = true"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </template>
    <el-table :data="settingList" border stripe>
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column label="医院名称" prop="hosname"> </el-table-column>
      <el-table-column label="医院编号" prop="hoscode"> </el-table-column>
      <el-table-column label="api基础路径" prop="apiUrl"> </el-table-column>
      <el-table-column label="签名" prop="signKey"> </el-table-column>
      <el-table-column label="联系人姓名" prop="contactsName">
      </el-table-column>
      <el-table-column label="联系人手机" prop="contactsPhone">
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" size="default" @click="edit(row)"
            >编辑</el-button
          >
          <el-button type="danger" size="default" @click="del(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :style="{ marginTop: '20px' }"
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      layout="->,total, prev, pager, next, sizes ,jumper"
      :page-sizes="[20, 40, 80, 100]"
      :total="totalNum"
      background
      :pager-count="7">
    </el-pagination>
  </el-card>

  <el-dialog
    title="新增"
    v-model="showDialog"
    width="40%"
    top="60"
    :style="{ marginTop: '30px' }"
    :fullscreen="dialogFull">
    <el-form
      hide-required-asterisk="true"
      ref="ruleFormRef"
      :model="ruleForm"
      rules="rules"
      label-width="100px"
      :inline="false"
      size="normal">
      <el-form-item label="医院名称:">
        <el-input placeholder="请输入" v-model="addHospital.hosname"></el-input>
      </el-form-item>
      <el-form-item label="医院编码:">
        <el-input placeholder="请输入" v-model="addHospital.hoscode"></el-input>
      </el-form-item>
      <el-form-item label="api基础路径:">
        <el-input placeholder="请输入" v-model="addHospital.apiUrl"></el-input>
      </el-form-item>
      <el-form-item label="联系人姓名:">
        <el-input
          placeholder="请输入"
          v-model="addHospital.contactsName"></el-input>
      </el-form-item>
      <el-form-item label="联系人手机:">
        <el-input
          placeholder="请输入"
          v-model="addHospital.contactsPhone"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="addOrEditSet">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import {
  reqGetHospitalSet,
  reqAddHosSet,
  reqEditHosSet,
  reqDelHosSet,
} from '@/api/hospital/index'
import type { AddHosSetType, SettingListType } from '@/api/hospital/type'
import { defineComponent, onMounted, reactive, ref, watch } from 'vue'

export default defineComponent({
  name: 'HospitalSet',
})
</script>

<script setup lang="ts">
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
// 初始化数据
const currentPage = ref(1)
const pageSize = ref(10)
const totalNum = ref(0)
const settingList = ref<SettingListType>([])
const showDialog = ref(false)
const searchHos = ref({
  hosname: '',
  hoscode: '',
})

// 新增医院设置
const addHospital = ref<RuleForm>({
  apiUrl: '',
  contactsName: '',
  contactsPhone: '',
  hoscode: '',
  hosname: '',
  id: null,
})

interface RuleForm {
  apiUrl: string
  contactsName: string
  contactsPhone: string
  hoscode: string
  hosname: string
  id?: null | number
}

// 表单校验
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
  contactsName: [
    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
  ],
  apiUrl: [{ required: true, message: '请输入api基础路径', trigger: 'blur' }],
  contactsPhone: [
    { required: true, message: '请输入联系人手机', trigger: 'blur' },
  ],
  hoscode: [
    { required: true, message: '请输入医院编码', trigger: 'blur' },
    { required: true, message: '医院编码不能重复', trigger: 'blur' },
  ],
  hosname: [{ required: true, message: '请输入医院名称', trigger: 'blur' }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 封装请求函数
const getHospitalSet = async (current: number = currentPage.value) => {
  try {
    const result = await reqGetHospitalSet(
      current,
      pageSize.value,
      searchHos.value.hosname,
      searchHos.value.hoscode
    )
    console.log(result)
    totalNum.value = result.total
    settingList.value = result.records
  } catch (error) {
    ElMessage.error('请求失败')
  }
}

// 初始化发请求
onMounted(() => {
  getHospitalSet()
})

//页码和每页条数改变重新发请求
watch([pageSize, currentPage], () => {
  getHospitalSet()
  //翻页之后回到顶部
  window.scrollTo(0, 0)
})

// 点击编辑
const edit = (row: AddHosSetType) => {
  showDialog.value = true
  addHospital.value = row
}

// 点击确定提交
const addOrEditSet = async () => {
  submitForm(ruleFormRef.value)
  if (!addHospital.value.id) {
    // 新增
    try {
      await reqAddHosSet(addHospital.value)
      ElMessage.success('新增成功')
      showDialog.value = false
      getHospitalSet()
    } catch (error) {
      ElMessage.error('新增失败')
    }
  } else {
    // 修改
    try {
      await reqEditHosSet(addHospital.value)
      ElMessage.success('修改成功')
      showDialog.value = false
      getHospitalSet()
    } catch (error) {
      ElMessage.error('修改失败')
    }
  }
}

// 删除
const del = async (id: number) => {
  try {
    await reqDelHosSet(id)
    ElMessage.success('删除成功')
    getHospitalSet()
  } catch (error) {
    ElMessage.error('删除失败')
  }
}

// 搜索
const search = () => {
  getHospitalSet(1)
}
</script>

<style scoped></style>
